	 <template>
	<view class="head">
		<view class="img" @click="back">
			<image src="https://splendid.oss-cn-beijing.aliyuncs.com/static/zhengyulan/back-arrow.png" mode=""></image>
		</view>
		<view class="message">
			<text>库存管理</text>
		</view>
	</view>

	<view class="body">
		<view class="container">
			<view class="conaten">
				<view class="left">一</view>
				<view class="center">郑州市生态环境综合行政执法支队</view>
				<view class="jiantyou">
					<image src="https://splendid.oss-cn-beijing.aliyuncs.com/static/zhengyulan/xila.png" mode=""></image>
				</view>
			</view>

			<view class="two">
				<view class="three" v-for="(item,index) in datalist">
					<view class="njiu">
						<view class="jhu">
							<view class="left">一</view>
							<!-- 区域名称 -->
							<view class="center">{{item.region}}</view>
							<view class="jiantou" @click="hh(index)">
								<image src="https://splendid.oss-cn-beijing.aliyuncs.com/static/zhengyulan/xila.png" mode=""></image>
							</view>
						</view>
					</view>
					  <view class="list"  v-if="nn === index" >
					   	<view class="tf" v-for="(items,num) in item.teams">
					   		<view class="left">{{items.name}}</view>
							<view class="bitton">
								<view class="button" @click="InventorymanagementDetails">
									查看企业
								</view>
							</view>
					   	</view>
					   </view>
				</view>
		
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	var datalist = ref([{
			"region": "二七区执法大队",
			"teams": [{
					"name": "执法一中队",
					"action": "查看企业"
				},
				{
					"name": "执法二中队",
					"action": "查看企业"
				},
				{
					"name": "执法三中队",
					"action": "查看企业"
				}
			],
		}, {
			"region": "中原区执法大队",
			"teams": [{
					"name": "执法一中队",
					"action": "查看企业"
				},
				{
					"name": "执法二中队",
					"action": "查看企业"
				},
				{
					"name": "执法三中队",
					"action": "查看企业"
				}
			],
		}, {
			"region": "管城回族区执法大队",
			"teams": [{
					"name": "执法一中队",
					"action": "查看企业"
				},
				{
					"name": "执法二中队",
					"action": "查看企业"
				},
				{
					"name": "执法三中队",
					"action": "查看企业"
				}
			],
		}, {
			"region": "惠济区执法大队",
			"teams": [{
					"name": "执法一中队",
					"action": "查看企业"
				},
				{
					"name": "执法二中队",
					"action": "查看企业"
				},
				{
					"name": "执法三中队",
					"action": "查看企业"
				}
			],
		},
		{
			"region": "金水区执法大队",
			"teams": [{
					"name": "执法一中队",
					"action": "查看企业"
				},
				{
					"name": "执法二中队",
					"action": "查看企业"
				},
				{
					"name": "执法三中队",
					"action": "查看企业"
				}
			],
		},
		{
			"region": "上街区执法大队",
			"teams": [{
					"name": "执法一中队",
					"action": "查看企业"
				},
				{
					"name": "执法二中队",
					"action": "查看企业"
				},
				{
					"name": "执法三中队",
					"action": "查看企业"
				}
			],
		}
	])
	var show = ref(false)
	var nn = ref(null)
	function hh (index) {
		nn.value = nn.value === index ? null : index
		
	}
	function InventorymanagementDetails (){
		uni.navigateTo({
			url:"/homePageOther/InventorymanagementDetails/InventorymanagementDetails"
		})
	}
	function back (){
		uni.navigateBack({
			delta:1
		})
	}
</script>

<style lang="scss" scoped>
	.head {
		width: 750rpx;
		height: 142rpx;
		background: #0874FA;
		position: relative;
		overflow: hidden;
	}

	.img {
		width: 22rpx;
		height: 38rpx;
		position: absolute;
		top: 75rpx;
		left: 40rpx;

		image {
			width: 22rpx;
			height: 38rpx;
		}
	}

	.message {
		width: 220rpx;
		height: 34rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		font-size: 36rpx;
		color: #FFFFFF;
		line-height: 34rpx;
		position: absolute;
		top: 75rpx;
		left: 270rpx;

		text {
			display: inline-block;
			width: 220rpx;
			height: 34rpx;
			text-align: center;
			line-height: 34rpx;
		}
	}

	.body {
		width: 100vw;
		height: 100%;
		background-color: #f3f5f7;
	}

	.container {
		width: 750rpx;
		// height: 100%;
		background-color: #f3f5f7;
		// overflow: hidden;

		.conaten {
			width: 750rpx;
			height: 95rpx;
			background: #FFFFFF;
			position: relative;
			margin-top: 16rpx;

			.left {
				width: 31rpx;
				height: 31rpx;
				background: #0874FA;
				border-radius: 7rpx;
				line-height: 31rpx;
				color: #FFFFFF;
				position: absolute;
				top: 34rpx;
				left: 40rpx;
				font-size: 11rpx;
				text-align: center;
			}

			.center {
				width: 470rpx;
				height: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: 600;
				font-size: 31rpx;
				color: #222222;
				line-height: 28rpx;
				position: absolute;
				top: 36rpx;
				left: 86rpx;
			}

			.jiantyou {
				width: 31rpx;
				height: 17rpx;
				position: absolute;
				top: 30rpx;
				right: 37rpx;

				image {
					width: 31rpx;
					height: 17rpx;
				}
			}
		}

		.two {
			width: 749rpx;
			height: 95rpx;
			margin-top: 3.47rpx;
			height: 95rpx;
			background: #FFFFFF;

			.njiu {
				width: 749rpx;
				height: 95rpx;
				background: #FFFFFF;
				margin-bottom: 3.14rpx;
				position: relative;

				.left {
					width: 31rpx;
					height: 31rpx;
					font-size: 11rpx;
					background: #0874FA;
					border-radius: 7rpx;
					color: #FFFFFF;
					text-align: center;
					line-height: 31rpx;
					position: absolute;
					top: 31rpx;
					left: 111rpx;
				}

				.center {
					width: 260rpx;
					height: 26rpx;
					font-family: Source Han Sans CN;
					font-weight: 600;
					font-size: 28rpx;
					color: #222222;
					line-height: 26rpx;
					position: absolute;
					top: 34rpx;
					left: 156rpx;
				}

				.jiantou {
					width: 31rpx;
					height: 17rpx;
					position: absolute;
					top: 38rpx;
					right: 46rpx;

					image {
						width: 31rpx;
						height: 17rpx;
					}
				}

			}

		}

	}

	.list {
		width: 749rpx;
		 transition: all 2s ease; /* 添加过渡效果 */
		  // transform: translateY(-20px); /* 初始状态隐藏 */
		  margin-top: 3.14rpx;
		// position: absolute;
		// bottom: -30rpx;
		.tf{
			width: 749rpx;
			height: 95rpx;
			background: #FFFFFF;
			 margin-bottom: 3.47rpx;
			position: relative;
			.left{
				width: 158rpx;
				height: 26rpx;
				font-family: Source Han Sans CN;
				font-weight: 600;
				font-size: 28rpx;
				color: #222222;
				line-height: 26rpx;
				position: absolute;
				top: 34rpx;
				left: 200rpx;
			}
			.bitton{
				width: 156rpx;
				height: 53rpx;
				background:rgba(8, 116, 250, .14);
				border-radius: 26rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				position: absolute;
				top: 21rpx;
				right: 53rpx;
				.button{
					width: 110rpx;
					height: 25rpx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					font-size: 27rpx;
					color: #0874FA;
					line-height: 31rpx;
				}
			}
		}
	}
</style>